<template>
    <div class="list" ref="wrapper">
        <div>
            <div class="area">
                <div class="title border-topbottom">当前城市</div>
                <div class="button-list">
                    <div class="button-wraper">
                        <div class="button">
                            背景
                        </div>
                    </div>
                </div>
            </div>
            <div class="area">
                <div class="title border-topbottom">热门城市</div>
                <div class="button-list">
                    <!--循环数组，键和索引-->
                    <div class="button-wraper" v-for="item of hotCities" :key="item.id">
                        <div class="button">
                            {{item.name}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="area" v-for="(item,key) in cities"
                 :key="key"
                 :ref="key"
            >
                <div class="title border-topbottom" v-text="key"></div>
                <div class="item-list">
                    <div class="item border-bottom" v-for="innerItem in item" :key="innerItem.id">{{innerItem.name}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: 'cityList',
  props: {
    hotCities: Array,
    cities: Object,
    alpha: String
  },
  watch: {
    alpha () {
      this.scroll.scrollToElement(this.$refs[this.alpha][0], 300)
    }
  },
  mounted: function () {
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}
</script>

<style lang="stylus" scoped>
    @import "~assets/style/param.styl"
    .border-topbottom
        &:before
            border-color #ccc

        &:after
            border-color #ccc

    .border-bottom
        &:before
            border-color #ccc

    .list
        position absolute
        top 1.6rem
        left 0
        right 0
        bottom 0
        overflow hidden

    .title
        line-height .4rem
        background #eee
        color #666
        font-size .26rem
        padding-left .2rem

    .button-list
        overflow hidden
        padding .1rem
        padding-right .6rem

    .button-wrapper
        float left

    .button
        margin .1rem
        padding .1rem 0
        text-align center
        border .02rem solid #ccc
        width 30%
        float left
        border-radius .03rem

    .item-list .item
        line-height .76rem
        padding-left .2rem
</style>
